
<!-- 
  *** *** ***
    * * * * *
    *** *** ***
 -->

<script setup lang="ts">
</script>


<template>
  <div class="decoration-type2">
    <!-- 装饰1 -->
    <div class="rhombus1"></div>
    <div class="rhombus2"></div>
    <div class="rhombus3"></div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
@import "./common.scss";
@mixin color-transition($keyframes, $duration, $delay) {
  animation: $keyframes $duration $delay ease-in-out infinite;
}
@mixin decoration-common {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 32% 0%, 64% 100%, 32% 100%);
}
$pad: 2%;
$headH: 2.5rem;
.decoration-type2 {
  width: 100%;
  height: 100%;
  position: relative;
  @include flex-row-center-center;
  .rhombus1 {
    @include decoration-common;
    left: 0%;
    @include color-transition(colorTech, 0.6s, 0s);
  }
  .rhombus2 {
    @include decoration-common;
    left: 33.5%;
    @include color-transition(colorTech, 0.6s, .2s);
  }
  .rhombus3 {
    @include decoration-common;
    left: 67%;
    @include color-transition(colorTech, 0.6s, .4s);
  }
}
</style>
